<%@ page contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <%--   icon --%>
  <link rel="icon" type="image/png" href="../favicon.ico"/>
  <link rel="shortcut icon" type="image/x-icon" href="../favicon.ico"/>
  <link rel="bookmark" type="image/x-icon" href="../favicon.ico"/>
  <%--   icon --%>
  <title>用户登录</title>
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-1.7.2.min.js"></script>
  <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.cookie.js"></script>
  <script type="text/javascript">
    $(function () {
      // $('.verifyCode').src("getVerifyCode");
      $('.verifyCode').attr('src', "getVerifyCode");
      console.log("contextPath:", '${pageContext.request.contextPath}');
      console.log('param:', '${param.error==true}');
      console.log('param:', '${param.error}');
      console.log('param:', '${param}');
      if (${param.error==true}) {
        console.log('show:', ${param.error==true});
        $('#login-box .error').show();
      }
      else {
        console.log('hide:', ${param.error==true});
        $('#login-box .error').hide();
      }
      const companyName = $.cookie('companyName');
      if (companyName != null && companyName !== '') {
        $('#login-box input[name=companyName]').val(companyName);
      }
      $('#login-box #loginButton').click(function () {
        let valErr = false;
        $('#login-box input:not(:hidden)').each(function () {
          console.log('this', $(this).attr('name'));
          const val = $.trim($(this).val());
          if (val === '') {
            valErr = true;
            // $(this).parent().next().find('div').show()
          }
        });
        console.log("valErr", valErr);
        if (valErr) {
          return;
        }
        $('#loginForm').submit();
      });
      $('#login-box input').click(function () {
        $('#login-box .error').hide();
        $(this).parent().next().find('div').hide();
      });
      /***************************************************/
      $(document).keydown(function (event) {
        const key_index = event.which;
        if (13 === key_index) {
          $("#loginForm").submit();
        }
      });
      /***************************************************/
    });
    function refresh(obj) {
      obj.src = "getVerifyCode?" + Math.random();
    }
    function mouseover(obj) {
      obj.style.cursor = "pointer";
    }
  </script>
  <style type="text/css">
    #login-box {
      position: absolute;
      top: 210px;
      right: 150px;
      width: 500px;
      height: 218px;
      font-size: 13px;
      /* 		background-image: url("/img/loginForm.png"); */
    }
    #login-box table {
      margin: 60px 0 0 60px;
    }
    #login-box input {
      background-color: #f6fbfd;
      border: 1px solid #c0c0c0;
      width: 170px;
    }
    #login-box input:hover {
      border-bottom: 1px solid #fc6f07;
    }
    input:-webkit-autofill {
      -webkit-box-shadow: 0 0 0 1000px #f6fbfd inset;
    }
    #login-box #error {
      color: red;
    <%--  display: none;--%><%--<c:if test="${param.error==true}">--%><%--  /**/--%><%--  display: block;--%><%--</c:if>--%>
    }
    #login-box .note {
      color: white;
      background-color: red;
      width: 120px;
      padding: 2px;
      display: none;
    }
    #login_footer {
      clear: both;
      display: block;
      margin-bottom: 20px;
      padding: 10px;
      /*border-top:solid 1px #e2e5e8;*/
      color: #666;
      text-align: center;
    }
    .onRecord:link {
      font-size: 12px;
      color: #000000;
      text-decoration: none;
    }
    .onRecord:visited {
      font-size: 12px;
      color: #000000;
      text-decoration: none;
    }
    .onRecord:hover {
      font-size: 12px;
      color: #999999;
      text-decoration: underline;
    }
  </style>
</head>
<body>
<div id="login-box">
  <div id="loginComet"></div>
  <%--<form id='loginForm' action="${pageContext.request.contextPath}/pjb/login" method='POST'>--%>
  <form id='loginForm' action="${pageContext.request.contextPath}/login" method='POST'>
    <table>
      <tr>
        <td colspan="3">
          <div id="error" class="error">用户名或密码错误或者没有分配权限</div>
        </td>
      </tr>
      <tr>
        <td>用户名:</td>
        <td><label>
          <input type='text' name='username' value='' class="required"/>
        </label></td>
        <td>
          <div class="note">用户名不能为空</div>
        </td>
      </tr>
      <tr>
        <td>密码:</td>
        <td>
          <label>
            <input type='password' name='password' value=""/>
          </label>
        </td>
        <td>
          <div class="note">密码不能为空</div>
        </td>
      </tr>
      <tr>
        <td>验证码(暂时可以不输):</td>
        <td>
          <label>
            <input type="text" name="verifyCode" value="">
          </label>
        </td>
        <td>
          <%--<img src="${pageContext.request.contextPath}/getVerifyCode" title="验证码" onclick="refresh(this)" onmouseover="mouseover(this)" alt="验证码"/>--%>
          <img src="" title="验证码" onclick="refresh(this)" onmouseover="mouseover(this)" alt="验证码" class="verifyCode"/>
        </td>
      </tr>
      <tr>
        <td></td>
        <td>
          <button id="loginButton" type="button">登录</button>
        </td>
        <td></td>
      </tr>
    </table>
  </form>
</div>
</body>
</html>
